#{set title:'Extranet' /} 
#{extends 'main.html' /}

<!-- barra superior. codigo para mostrar o nome do usuario logado -->
<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container">
			<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span
				class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
			</a> <a class="brand" align="center"> &nbsp; EXTRANET - Sistema de Controle de Tarefas</a>
			<div>
				<ul class="nav pull-right">

					<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> Ola,
							<b>${user}</b> <b class="caret"></b>
					</a>
						<ul class="dropdown-menu">
							<li><a href="@{Application.logout()}"> <i class="icon-off"></i> Sair</a></li>
						</ul></li>
				</ul>
			</div>
		</div>
	</div>
</div>
<br><br><br>
<label align=center style="width:80%"> <h3> Tarefas em Atraso </h3> </label>
<br><br>
	<table class="table table-striped table-bordered table-condensed" style="width:80%;">
		<tr>
			<!-- <th>ID</th> -->
			<th>!</th>
			<th>Prioridade</th>
			<th>ID</th>
			<th>Titulo da Tarefa</th>
			<th>Respons&aacute;vel</th>
			<th>Tempo Estimado</th>
			<th>Tempo Gasto</th>
			<th>Porcentagem conclu&iacute;da</th>
			<th>Status</th>
			<!-- <th>Status</th> -->
		</tr>
	#{list tarefas, as:'t'}
		 <tr>
			 <!-- <td>${t.id}</td> -->
			 <td> 
			 	<image class="imagem1" src="/public/images/${t.grauTarefa}.jpg" />
			 </td>
			 <td width="10px">${t.prioridade}</td>
			 <td>${t.id}</td>
			 <td><a href="@{Tarefas.detalhesTarefa(t.id)}">${t.tituloTarefa}</a></td>
			 <th>${t.usuario.nome}</th>
			 <td>${t.tempoEstimado.format('0')} hs </td>
			 <td>${t.hora}:${t.minuto} hs</td>
			 <td><div class="progress progress-striped active">
					<div class="bar" 
					style="width:${t.porcentagem}%;">${t.porcentagem.format('00.0')}%</div>
					</div>
			 </td>
			<td>${t.status}</td>
		 </tr>
	 #{/list}
	</table>
